<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>layui</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
  <link rel="stylesheet" href="__PUBLIC__/layui/css/layui.css"  media="all">
  <link rel="stylesheet" href="__PUBLIC__/font-awesome/css/font-awesome.min.css" media="all" />
  <link rel="stylesheet" href="__CSS__/admin.css"  media="all">
  <style type="text/css">
  /* tooltip */
  #tooltip{
    position:absolute;
    border:1px solid #ccc;
    background:#333;
    padding:2px;
    display:none;
    color:#fff;
  }
  </style>
</head>
<body style="padding:10px;">
  <div class="tplay-body-div">
    <div class="layui-tab">
      <ul class="layui-tab-title">
        <li class="layui-this">拆迁人口管理</li>
        <?php if(!in_array($admin_cate_id,$operation)){ ?>
        <li><a href="{:url('admin/population/add')}" class="a_menu">家庭成员</a></li>
        <?php } ?>
      </ul>
    </div> 
    <h1 align="center">{$zhu.name}的家庭成员</h1>
    <br /><br />
    <center>
    协议签定日期：2018.05.02                 　　　　　　　　     编号：（001）第51号 
    </center>
    <table class="layui-table" lay-size="lg">
        <tr >
          <td valign="center" ><p align="right" ><strong>户主姓名</strong></p></td>
          <td valign="center" ><p >{$zhu.name}</p></td>
          <td valign="center" ><p align="center" >{$zhu.sex} </p></td>
          <td valign="center" ><p align="center" >{$zhu.age}岁 </p></td>
          <td valign="center" ><p align="center" >包子铺 </p></td>
          <td valign="center" ><p align="center" > </p></td>
        </tr>
        <tr >
          <td valign="center" ><p align="right" ><strong>身份证号</strong></p></td>
          <td valign="center" colspan="2" ><p >{$zhu.idcar} </p></td>
          <td valign="center" ><p align="right" ><strong>联系方式</strong></p></td>
          <td valign="center" colspan="2" ><p >13232348196 </p></td>
        </tr>
        <tr >
          <td valign="center" ><p align="right" ><strong>拆迁人口数</strong></p></td>
          <td valign="center" ><p align="center" ><a href="#">{$zhu.chairen} </a></p></td>
          <td valign="center" ><p align="right" ><strong>基本村民</strong></p></td>
          <td valign="center" ><p align="center" >{$zhu.chaicun} </p></td>
          <td valign="center" ><p align="right" ><strong>非基本村民</strong></p></td>
          <td valign="center" ><p align="center" >{$zhu.chaifei} </p></td>
        </tr>
    </table>
    <h2 id="" style="text-align:center">家庭成员</h2>
    <?php if(!in_array($admin_cate_id,$operation)){ ?>
      <div style="text-align:center"><a class="layui-btn add" >增加人员</a></div>
    <?php } ?>
    <table class="layui-table" id="table" lay-filter="test1" lay-size="lg">
      <colgroup>
        <col width="100">
        <col width="100">
        <col width="130">
        <col width="130">
        <col width="200">
        <col width="100">
        <col width="50">
        <col width="120">
        <col width="100">
        <col width="50">
        <col width="100">
      </colgroup>
      <thead>
        <!-- <tr>
          <th lay-data="{field:'id'}">ID</th>
          <th lay-data="{field:'relation', width:80, sort: true,edit: 'text'}">关系</th>
          <th lay-data="{field:'name', width:80, sort: true,edit: 'text'}">姓名</th>
          <th lay-data="{field:'idcar', width:120, sort: true, edit: 'text'}">身份证号</th>
          <th lay-data="{field:'age_xie', edit: 'text', minWidth: 150}">协议时年龄</th>
          <th lay-data="{field:'age', width:80, edit: 'text'}">现年龄</th>
          <th lay-data="{field:'sex', edit: 'text', minWidth: 100}">性别</th>
          <th lay-data="{field:'ishun', sort: true, edit: 'text'}">婚姻</th>
          <th lay-data="{field:'iscun', sort: true, edit: 'text'}">是否基本村民</th>
        </tr> -->
        <tr>
          <!-- <th lay-data="{field:'id'}">ID</th> -->
          <th>关系</th>
          <th>姓名</th>
          <th>身份证号</th>
          <th>协议时年龄</th>
          <th>现年龄</th>
          <th>性别</th>
          <th>婚姻</th>
          <th>是否基本村民</th>
        </tr>
      </thead>
      <tbody>
        {volist name="list" id="vo"}
        <tr>
          <!-- <td>{$vo.id}</td> -->
          <td>{$vo.relation}</td>
          <td>{$vo.name}</td>
          <td>{$vo.idcar}</td>
          <td>{$vo.age}</td>
          <td>{$vo.age_xian}</td>
          <td>{$vo.sex}</td>
          <td>{$vo.ishun}</td>
          <td>{$vo.iscun}</td>
          <!-- <td class="add"> -->
            <!-- <a class="layui-btn layui-btn-xs add">添加</a> -->
            <!-- <a class="layui-btn layui-btn-danger layui-btn-xs del">删除</a> -->
          <!-- </td> -->
        </tr>
        {/volist}
      </tbody>
    </table>
    <div style="padding:0 20px;"></div> 
    {include file="public/foot"}
  </div>
  <!-- <script>
    layui.use('table', function(){
      var table = layui.table;
      
      //监听单元格编辑
      table.on('edit(test1)', function(obj){
        var value = obj.value //得到修改后的值
        ,data = obj.data //得到所在行所有键值
        ,field = obj.field; //得到字段
        layer.msg('[ID: '+ data.id +'] ' + field + ' 字段更改为：'+ value);
      });
    });
    
  </script> -->
  <script>

      //因为动态添加的元素class属性是无效的，所以不能用$('.add').click(function(){});
      $('body').on('click', '.add', function() {
          $('.add').hide();
          //你要添加的html
          var html = '<tr><form id="aaa">'+
            '<td><input type="text" class="layui-input" name="relation"></td>'+
            '<td><input type="text" class="layui-input" name="name"></td>'+
            '<td><input type="text" class="layui-input" name="idcar"></td>'+
            '<td><input type="text" class="layui-input" name="age"></td>'+
            '<td>保存自动生成</td>'+
            '<td><input type="text" class="layui-input" name="sex"></td>'+
            '<td><input type="text" class="layui-input" name="ishun"></td>'+
            '<td><input type="text" class="layui-input" name="iscun"></td></form>'+
            "<td>"+
                "<a class='layui-btn layui-btn-xs edit data-count-edit' lay-event='edit'>保存数据</a><a class='layui-btn del layui-btn-xs layui-btn-danger data-count-delete' lay-event='delete'>删除</a>"+
            "</td>"+
          '</tr>';
          // // console.log(html)
          // //添加到表格最后
          $(html).appendTo($('#table tbody:last'));
          // $(".layui-table-body .layui-table").append(html);
          // form.render();//因为有select元素，所有添加后要重新渲染一次
      });
      $('body').on('click', '.del', function() {
        if ($('#table tbody tr').length === 1) {
          layer.msg('只有一条不允许删除。', {
            time : 2000
          });
        } else {
          $(this).closest('tr').remove();
          $('.add').show();
        }
      });
      $(document).on('click','.edit',function(){
            $.ajax({
                url:'{:url("admin/population/info")}',
                async : false,    //表示请求是否异步处理
                type : "post",    //请求类型
                dataType : "json",//返回的数据类型
                data:{
                  'pid':{$zhu.id},
                  'relation':$("input[name='relation']").val(),
                  'name':$("input[name='name']").val(),
                  'idcar':$("input[name='idcar']").val(),
                  'age':$("input[name='age']").val(),
                  'sex':$("input[name='sex']").val(),
                  'ishun':$("input[name='ishun']").val(),
                  'iscun':$("input[name='iscun']").val(),
                },
                success:function (res) {
                  if (res == 200) {
                      layer.msg('操作成功', {
                        time : 2000
                      });
                      setTimeout(function(){
                        window.location.reload()
                      },2000);
                      
                  }
                },
                error:function (err) {
                    console.log(err); 
                }
            })
      })
  </script>
</body>
</html>